<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>成绩查看</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no" />
    <script src="./js/jquery.min.js"></script>
    <script src="./js/Chart.min.js"></script>
    <link href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="./css/style2.css" rel="stylesheet" type="text/css" />
    <link href="./css/reset.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<div class="container-fluid">
        <div class="details col-xs-12 col-sm-12">
            <p>学员:张海</p>
            <p>性别:男</p>
            <p>课程:专业英语</p>
            <p>提高提示：目前你的学习状态在校内处于中上等水平，专业课程掌握较好，其他基础课程掌握稍差，希望能提高基础课程的关注度。</p>
        </div>
    </div>
    <canvas id="myCanvan" width="80vw" height="60vh"></canvas>
    <script>
    $(function(){
        $.ajax({
            type: "get",//请求方式
            url: "abc.json",//地址，就是json文件的请求路径
            dataType: "json",//数据类型可以为 text xml json  script  jsonp
            success: function(result){//返回的参数就是 action里面所有的有get和set方法的参数
                console.log(result);
                var myCans=document.getElementById("myCanvan");
                var myCanvan =new Chart(myCans,{
                    type:"bar",
                    data:result,
                    option:{
                        scales:{
                            yAxes:[{
                                ticks:{
                                    beginAtZero:true
                                }
                            }]
                        }

                    }
                })
            }
        });
    });



</script>
</body>

</html>